<template>
  <div class="person">
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.name }} -- {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="Person">
  import { type IPerson, type Persons } from '../types'
  import { withDefaults } from 'vue';


  //第一种写法：仅接收
  // const props = defineProps(['list'])

  //第二种写法：接收+限制类型
  // defineProps<{ list: Persons }>()

  //接收list + 限制类型 +限制必要性 +指定默认值
  withDefaults(
    defineProps<{ list?: Persons }>(),
    {
      //必须是函数，返回一个对象
      list: () => [{ id: 'e98219e15', name: '默认值', age: 19 },]
    }
  )



</script>
<style scoped>
  .person {
    width: 100%;
    background-color: skyblue;
    box-shadow: 0px 1px 2px #ddd;
    border-radius: 10px;
    padding: 20px;
  }

  button {
    margin: 0 5px;
  }

  li {
    font-size: 20px;
  }
</style>
